<template>
	<view class="school color333">
		<!-- #ifdef APP-PLUS || H5 -->
		<uni-mdnav :title="`校友圈`" ref="mdNav" leftIcon="" rightIcon="notification" :border="true"></uni-mdnav>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uni-mdnav :title="`校友圈`" ref="mdNav" leftIcon="" :border="true"></uni-mdnav>
		<!-- #endif -->
		<view class="collect">
			<view class="flex alignCenter justConBetween colTitle">
				<view class="font14 bold">我的收藏</view>
				<view class="colorccc font12 flex alignCenter" @click="seeMore">查看全部<uni-icons class="rightIcon" type="right" size="15" @click="seeMore" ></uni-icons></view>
			</view>
			<view class="flex alignCenter justConBetween">
				<view class="flex alignCenter">
					<template v-for="(item,index) in schoolCol">
						<view class="schoolItem" v-if="index<=4" :key="index" @click="chooseShow(item)">
							<image :src="item.logo" mode="widthFix"></image>
							<view class="font12 color999 hiddenOneline">{{item.circleName}}</view>
						</view>
					</template>
				</view>
				<view v-if="schoolCol.length>0" class="add flex alignCenter font18" @click="addCol('add')"><text>+</text></view>
			</view>
			<view class="flex alignCenter justConAround schoolBox font18">
				<uni-nodata v-if="schoolCol.length==0" :noText="noText"></uni-nodata>
				<view v-if="schoolCol.length==0" class="add flex alignCenter onlyAdd" @click="addCol('add')">+</view>
			</view>
		</view>
		<!-- 大学名 -->
		<view class="schoolName" v-if="showSchool" @click="addCol('more')">
			<view class="">
				<text class="font16 bold title">{{showSchool.circleName || showSchool.title}}</text> 
				<uni-icons class="rightIcon" type="bottom" size="15" @click="addCol('more')"></uni-icons>
			</view>
		</view>
		<!-- 提问列表区 -->
		<view class="quesBox">
			<view class="queHotTitle flex alignCenter justConBetween font18">
				<view class="bold flex alignCenter">热点<image src="@/static/image/icons/star2.png" mode="widthFix"></image></view>
				<view class="font14 colorccc" @click="moreClick('hot')">更多</view>
			</view>
			<!-- 一个热点 -->
			<view class="oneHot">
				<template v-for="(item,idx) in hotOneArr">
					<uni-questionhot class="quesBoxItem" :quesItem="item" :key="idx" @quesOper="quesOper"></uni-questionhot>
				</template>
				<uni-nodata v-if="(hotOneArr.length==0)" :noText="`暂无数据`"></uni-nodata>
			</view>
			<!-- 问答明星 -->
			<view class="hotGroup" v-if="starArr.length>0">
				<view class="queHotTitle flex alignCenter justConBetween font18">
					<view class="bold flex alignCenter">问答明星<image src="@/static/image/icons/star2.png" mode="widthFix"></image></view>
					<view class="font14 colorccc" @click="moreClick('star')">更多</view>
				</view>
				<view class="flex justConBetween group">
					<template v-for="(item,index) in starArr">
						<view class="starOne">
							<uni-questar circle="school" :starItem="item" :key="index"></uni-questar>
						</view>
					</template>
				</view>
			</view>
			<!-- 热门群和小组 -->
			<view class="hotGroup" v-if="groupData.length>0">
				<view class="queHotTitle flex alignCenter justConBetween font18">
					<view class="bold flex alignCenter">热门群和小组<image src="@/static/image/icons/star2.png" mode="widthFix"></image></view>
					<view class="font14 colorccc" @click="moreClick('group')">更多</view>
				</view>
				<view class="flex justConBetween group">
					<template v-for="(item,index) in groupData">
						<view class="groupOne">
							<uni-mygroup :groupItem="item" :key="index" @groupComOper="groupComOper"></uni-mygroup>
						</view>
					</template>
				</view>
			</view>
			<!-- 热门活动 -->
			<view class="hotGroup" v-if="activityData.length>0">
				<view class="queHotTitle flex alignCenter justConBetween font18">
					<view class="bold flex alignCenter">热门活动<image src="@/static/image/icons/star2.png" mode="widthFix"></image></view>
					<view class="font14 colorccc" @click="moreClick('activity')">更多</view>
				</view>
				<view class="flex justConBetween group">
					<template v-for="(item,index) in activityData">
						<view class="activityOne" :key="index">
							<uni-activity :activityItem="item" :canJoin="true" :canStar="true" @actComOper="actComOper"></uni-activity>
						</view>
					</template>
				</view>
			</view>
			<!-- 热点推荐列表 -->
			<view class="hotBox">
				<template v-for="(item,index) in hotArr">
					<uni-question :quesItem="item" :key="index" @quesOper="quesOper"></uni-question>
				</template>
				<!-- <uni-nodata v-if="(hotArr.length==0)" :iconStyle="{width:'150rpx'}" :noText="`暂无数据~`"></uni-nodata> -->
			</view>
			
		</view>
		<!-- 悬浮按钮功能区 -->
		<view class="floatBtn" v-if="!showProvince">
			<view class="flex alignCenter" :animation="animationData3" @click="clickBack(0)">
				<view class="">
					<image src="@/static/image/floatBtn/q3.png" mode="widthFix"></image>
					<view class="font10" style="color: #fff;">提问</view>
				</view>
			</view>
			<view class="flex alignCenter" :animation="animationData2" @click="clickBack(1)">
				<view class="">
					<image src="https://image.alhelp.net/uploads/20231104/264fde525401b098d1f6c16238a0b7f7.png" mode="widthFix"></image>
					<view class="font10" style="color: #fff;">写笔记</view>
				</view>
			</view>
			<view class="flex alignCenter" :animation="animationData1" @click="clickBack(2)">
				<view class="">
					<image src="https://image.alhelp.net/uploads/20231104/98cb14c3bca017a4fe2dd8419cc9af3f.png" mode="widthFix"></image>
					<view class="font10" style="color: #fff;">找人</view>
				</view>
			</view>
			<view class="flex alignCenter" :animation="animationData0" @click="clickBack(4)">
				<view class="">
					<image src="https://image.alhelp.net/uploads/20231104/64b55f119789b49fd78c3b3be60951ed.png" mode="widthFix"></image>
					<view class="font10" style="color: #fff;">打卡任务</view>
				</view>
			</view>
			<view class="flex alignCenter" @click="clickBack(3)" style="background: #9a9a9a;">
				<view class="">
					<view class="font12" style="color: #fff;">更多</view>
				</view>
			</view>
		</view>
		<!-- 选择学校 -->
		<uni-chooseschool v-if="showProvince" :showProvince="showProvince" @schoolSuccess="schoolSuccess" @cancelProvince="cancelProvince"></uni-chooseschool>
		<uni-login @closeLogin="closeLogin" :loginShow="isLoading"></uni-login>
	</view>
</template>

<script>
	import { getMyCollection,addCollection } from "@/api/collection.js"
	import { getSchoolByPro } from "@/api/index.js"
	import { schoolHotOne,schoolHot,hotMoreList,groupList,activityList,quesStar } from "@/api/school.js"
	import { joinActivity } from "@/api/send.js"
	import { modeJudge,isPullDown,getNoRead,navigateLoginPage } from "@/utils/common.js"
	import uniLogin from '@/components/uni-login/uni-login.vue'
	export default {
		data() {
			return {
					isLoading: false,
				showProvince:false,
				schoolCol:[],
				showSchool:'',
				noText:'添加收藏的大学后，就可以直接查看啦',
				floatArr:[{
					title:'提问',
					icon:'/static/image/floatBtn/q.png',
					// canShow:false,
				},
				{
					title:'写笔记',
					icon:'/static/image/floatBtn/group.png',
					// canShow:false,
				},{
					title:'找人',
					icon:'/static/image/floatBtn/act.png',
					// canShow:false,
				},{
					title:'更多',
					icon:'',
					canShow:false
				},
				{
					title:'打卡任务',
					icon:'',
					canShow:false
				}
				],
				chooseSchoolOper:false,
				hotOneArr:[],
				hotArr:[],
				groupData:[],
				activityData:[],
				page:1,
				pageSize:10,
				pageTotal:0,
				
				animationData0: {},
				animationData1: {},
				animationData2: {},
				animationData3: {},
				starArr:[]
			}
		},
		watch:{
			showProvince: {
				handler (val) {
					// 出现蒙层的时候禁用掉页面的下拉刷新，反之
					// #ifdef APP-PLUS
					isPullDown(!val)
					console.log('v=====',val)
					// #endif
				},
				immediate: true,
				deep:true,
			},
			isLoading(newV) {
				if(newV){
					uni.hideTabBar();
				}else{
					uni.showTabBar();
				}
			}
		},
		onLoad() {
			// 为了解决查看大图导致页面执行onShow钩子，导致页面数据刷新
			uni.removeStorageSync('previewImg')
			// 去详情返回后导致页面刷新
			uni.removeStorageSync('noFresh')
		},
		onShow() {
			// #ifdef APP-PLUS || H5
			this.$nextTick(()=>{
				this.$refs.mdNav.reFresh()
			})
			// #endif
			
			if(uni.getStorageSync('previewImg') || uni.getStorageSync('noFresh')) return
			// 解决到底线后去到下一页再返回会导致偶尔会直接请求第二页数据的问题
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 20
			});
			
			this.initPage()
			this.getGroupList()
			this.getActivityList()
			this.initData()
			
			// #ifdef MP-WEIXIN
			// 获取未读消息
			if(!uni.getStorageSync('token')) return;
			getNoRead()
			// #endif
		},
		onUnload() {
			uni.removeStorageSync('previewImg')
			uni.removeStorageSync('noFresh')
			// if(uni.getDeviceInfo().deviceBrand=='apple'){
			// 	uni.offNetworkStatusChange()
			// }
		},
		methods: {
			// 关于登录与否以及是否有收藏做的判断
			initData(){
				if(uni.getStorageSync('token')){
					// 有登录,调用收藏接口,判断是否有收藏的学校(热点都是根据收藏的大学来请求的)
					this.getColList()
				}else{
					// 未登录直接调用学校接口
					this.getSchoolList()
				}
			},
			initPage(){
				this.page=1;
				this.hotArr=[];
				this.hotOneArr=[];
			},
			// 获取学校，进来后若没有收藏，默认显示北京大学
			getSchoolList(){
				let param={
					areaId:"1475405387606917120",
					pageNum:1,
					pageSize:1,
					reasonable:true,
				}
				getSchoolByPro(param).then((res)=>{
					if(res.code==100000){
						if(!this.showSchool){
							this.showSchool=res.data.rows[0]
							
						}
						this.getHotOne()
						this.getHotList()
						this.getQuesStar()
						console.log('默认北京',this.showSchool,res)
					}
				}).catch(()=>{})
			},
			// 获取收藏列表
			getColList(){
				// 1校友圈  2专业圈
				getMyCollection({circleType:1}).then((res)=>{
					if(res.code==100000){
						this.schoolCol=res.data
						// 有收藏大学进来第一次，
						if(this.schoolCol.length>0){
							// 并且不是切换收藏大学后才赋值，不需要每次onShow的时候都初始化
							if(!this.chooseSchoolOper){
								this.showSchool=this.schoolCol[0]
							}
							this.getHotOne()
							this.getHotList()
							this.getQuesStar()
						}else{
							// 如果没有收藏,调用学校的接口拿默认学校的数据
							this.showSchool=''
							this.getSchoolList()
						}
					}
				})
			},
			// 热点提问
			getHotOne(){
				let param={
					page:1,
					size:1,//this.pageSize,
					objectId:this.showSchool.objectId || this.showSchool.schoolCode,
				}
				schoolHotOne(param).then((res)=>{
					if(res.code==100000){
						this.hotOneArr=res.data.rows
					}
				})
			},
			// 问答明星
			getQuesStar(){
				let param={
					type:1,//1校友圈；2专业圈
					objectId:this.showSchool.objectId || this.showSchool.schoolCode,
				}
				quesStar(param).then((res)=>{
					if(res.code==100000){
						console.log('问答冥想',res)
						this.starArr=res.data
					}
				})
			},
			// 热门群和小组
			getGroupList(){
				let param={
					page:1,
					size:2,
				}
				groupList(param).then((res)=>{
					if(res.code==100000){
						this.groupData=res.data.rows
					}
				}).catch((err)=>{})
			},
			// 热门活动
			getActivityList(){
				let param={
					page:1,
					size:2,
				}
				activityList(param).then((res)=>{
					if(res.code==100000){
						this.activityData=res.data.rows
					}
				}).catch((err)=>{})
			},
			// 热门活动的操作
			actComOper(obj){
				if(obj.type=='join'){
					this.getActivityList()
				}
			},
			// 热点提问列表
			getHotList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					// circleId:this.showSchool.id,
					objectId:this.showSchool.objectId || this.showSchool.schoolCode,
				}
				schoolHot(param).then((res)=>{
					if(res.code==100000){
						this.hotArr=this.hotArr.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
						console.log('热点列表',res)
					}
					uni.hideLoading()
				}).catch((err)=>{uni.hideLoading()})
			},
			dealListData(){
				this.hotArr.forEach((item)=>{
					if(item.nodes){
						let param={
							name:'div',
							children:[]
						}
						item.nodes.forEach((item2)=>{
							if(item2.type=='text'){
								param.children.push({
									type:'text',
									text:item2.content
								})
							}
							if(item2.type=='image'){
								param.children.push({
									name:'img',
									attrs:{
										src:item2.url,
										style: 'width:100%'
									}
								})
							}
							// goodNodes.push(param)
							item.goodNodes=[param]
						})
					}
				})
			},
			// 切换收藏的学校事件
			chooseShow(item){
				console.log('学校展示',item)
				this.showSchool=item
				// 用来标识是否切换了大学（是为了onShow的时候默认选择的大学不会被初始化）
				this.chooseSchoolOper=true
				this.initPage()
				this.getGroupList()
				this.getActivityList()
				this.getHotOne()
				this.getHotList()
				this.getQuesStar()
			},
			// 收藏查看更多
			seeMore(){
				if(!uni.getStorageSync('userId')){
					navigateLoginPage()
					return
				}
				uni.navigateTo({
					url:"/pages/mine/collection/collection?type=school"
				})
			},
			// 添加收藏
			addCol(type){
				this.chooseType=type
				if(type=='add' && !uni.getStorageSync('userId')){
					navigateLoginPage()
					return
				}
				uni.hideTabBar()
				this.showProvince=true
			},
			cancelProvince(){
				this.showProvince=false
				uni.showTabBar()
			},
			// 选择学校后的确定回调事件
			schoolSuccess(item){
				item.school.circleName=item.school.title
				item.school.logo=item.school.imageUrl
				if(this.chooseType=='add'){
					// 点击收藏+按钮是加入到收藏
					let param={
						circleType:1,
						objectId:item.school.schoolCode,
						circleName:item.school.title,
						logo:item.school.imageUrl
					}
					addCollection(param).then((res)=>{
						if(res.code==100000){
							this.schoolCol.unshift(item.school)
							if(this.schoolCol.length>5){
								this.schoolCol.splice(this.schoolCol.length-1,1)
							}
							this.showSchool=this.schoolCol[0]
							this.showProvince=false
							uni.showTabBar()
							this.initPage();
							this.getGroupList()
							this.getActivityList()
							this.getHotOne();
							this.getHotList();
							this.getQuesStar()
							console.log('添加收藏',this.showSchool)
						}
					})
				}else{
					// 点击学校是切换成想看的学校并不收藏
					this.showSchool=item.school
					this.showProvince=false
					uni.showTabBar()
					this.initPage();
					this.getGroupList()
					this.getActivityList()
					this.getHotOne();
					this.getHotList();
					this.getQuesStar()
				}
				console.log('选择的学校',item,this.schoolCol)
			},
			closeLogin(){
				this.isLoading = false;
			},
			// 悬浮按钮点击事件
			clickBack(idx){
				console.log()
				if(this.floatArr[idx].title=='更多'){
					this.floatArr[idx].canShow=!this.floatArr[idx].canShow
					let animation0 = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					let animation1 = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					let animation2 = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					let animation3 = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					console.log('点击',this.floatArr[idx].canShow)
					if(this.floatArr[idx].canShow){
						animation0.translateY(-60).step()
						animation1.translateY(-120).step()
						animation2.translateY(-180).step()
						animation3.translateY(-240).step()
					}else{
						animation0.translateX(0).translateY(0).step()
						animation1.translateX(0).step()
						animation2.translateX(0).translateY(0).step()
						animation3.translateX(0).translateY(0).step()
					}
					this.animationData0 = animation0.export()
					this.animationData1 = animation1.export()
					this.animationData2 = animation2.export()
					this.animationData3 = animation3.export()
					return
				}
				if(!uni.getStorageSync('token')){
					
					// #ifdef MP-WEIXIN
					this.isLoading = true;
					// #endif
					// #ifndef MP-WEIXIN
					navigateLoginPage()
					// #endif
					return
				}
				if(this.floatArr[idx].title.indexOf('提问')!=-1){
					uni.navigateTo({
						url:`/pages/send/question/question?from=school`
					})
				}else if(this.floatArr[idx].title.indexOf('笔记')!=-1){
					uni.navigateTo({
						url:`/pages/mine/note/note?from=school`
					})
					return
				}else if(this.floatArr[idx].title.indexOf('找人')!=-1){
					uni.navigateTo({
						url:`/pages/send/lookFor/index?from=school`
					})
					return
				}else if(this.floatArr[idx].title.indexOf('打卡任务')!=-1){
					uni.navigateTo({
						url:`/pages/mine/task/task?from=school`
					})
					return
				}
				// modeJudge().then((canNext)=>{
				// 	if(canNext){
						
				// 	}
				// })
			},
			// 更多热点
			moreClick(type){
				if(type=='star'){
					let circleId=this.showSchool.objectId || this.showSchool.schoolCode
					uni.navigateTo({
						url:'/pages/school/hotStar/hotStar?circleId='+circleId
					})
				}else if(type=='hot'){
					// 先判断是否有数据，有再跳转
					let param={
						page:1,
						size:10,
						objectId:'',
					}
					hotMoreList(param).then((res)=>{
						if(res.code==100000){
							if(res.data.rows.length>0){
								let id=this.showSchool.objectId || this.showSchool.schoolCode
								uni.navigateTo({
									url:'/pages/school/hotScreen/hotScreen?id='+id
								})
							}else{
								uni.showToast({
									title:'还没有更多的热点提问哦，先去提问试试？',
									icon:'none'
								})
							}
						}
					})
					return
				}else if(type=='group'){
					uni.navigateTo({
						url:'/pages/school/hotGroup/hotGroup'
					})
					return
				}else if(type=='activity'){
					uni.navigateTo({
						url:'/pages/school/hotActivity/hotActivity'
					})
				}
				
			},
			// 热点列表的操作回调事件
			quesOper(obj){
				if(obj.type=='focus'){
					this.hotArr.forEach((item)=>{
						if(obj.userId==item.createUserId){
							item.isLikedUser=obj.status
						}
					})
					this.hotOneArr.forEach((item)=>{
						if(obj.userId==item.createUserId){
							item.isLikedUser=obj.status
						}
					})
				}
			},
			// 小组组件操作的回调
			groupComOper(obj){
				if(obj.type=='add'){
					this.getGroupList()
				}
			}
		},
		onPullDownRefresh() {
			this.showProvince=false
			this.initPage()
			this.initData()
			this.getGroupList()
			this.getActivityList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getHotList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";
page{
	background: $pageBgColor;
}
</style>
<style scoped lang="scss">
@import "@/static/public.scss";
::v-deep .autoShowVideo{
	display: var(--can-show);
}
.collect{
	padding:20rpx 30rpx;
	box-sizing: border-box;
	background: #fff;
	.colTitle{
		margin: 0 0 40rpx 0;
	}
	.rightIcon{
		color:$colorccc !important;
	}
	.schoolBox{
		position: relative;
	}
	.schoolItem{
		text-align: center;
		margin:0 10rpx 0 0;
		flex:1;
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	.schoolItem:last-child{
		margin: 0;
	}
	.add{
		background: $colorMain;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		// align-items: center;
		// line-height: 60rpx;
		// line-height: 1em;
		flex-shrink: 0;
		justify-content: center;
		margin-top: -40rpx;
		text{
			font-size: 28rpx;
			font-weight:700 ;
			display: inline-block;
		}
	}
	.onlyAdd{
		position: absolute;
		right: 0;
	}
}
.schoolName{
	text-align: center;
	// background: #fff;
	margin:20rpx 0;
	&>view{
		display: inline-block;
	}
	.title{
		display: inline-block;
		margin-right: 30rpx;
		padding: 20rpx 0;
		&::after{
			content:'';
			display: block;
			background: $colorMain;
			height: 10rpx;
			border-radius: 20rpx;
			// margin-top:-6rpx;
			box-shadow: 0 6px 10px rgba(0,0,0,.15);
		}
	}
}
.quesBox{
	box-sizing: border-box;
	.queHotTitle{
		padding: 50rpx 30rpx;
		background: #fff;
		margin: 0;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.hotGroup{
		margin:0 0 20rpx;
		background:#fff;
		.group{
			padding:0 30rpx 30rpx;
			box-sizing: border-box;
			align-items: flex-start;
			.groupOne,
			.activityOne,
			.starOne{
				flex:0 0 48%;
			}
		}
	}
	.oneHot{
		padding: 0rpx 30rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		margin:0 0 20rpx;
	}
}
.floatBtn{
	// position: fixed;
	// right: 30rpx;
	// bottom: 300rpx;
	// z-index: 3000;
	.floatItem{
		margin-bottom: 30rpx;
		padding: 5rpx;
	}
	&>view{
		width: 100rpx;
		height: 100rpx;
		background: rgba(102, 102, 102, .66);
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .1);
		border-radius: 50%;
		text-align: center;
		position:fixed;
		right:30rpx;
		bottom: 300rpx;
		z-index: 3000;
		// padding:20rpx;
		box-sizing: border-box;
		&>view{
			width: 100%;
		}
		image{
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin: 0 auto;
		}
	}
}

</style>
